<template>
  <div class="report-query">
    <!-- 搜索栏 -->
    <div class="search-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索报告标题、病例编号、调查地点"
        prefix-icon="el-icon-search"
        clearable
        @input="handleSearch"
      >
        <el-button 
          slot="append" 
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
      </el-input>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <div class="section-title">
        <i class="el-icon-s-operation"></i>
        <span>筛选条件</span>
        <el-button 
          type="text" 
          size="mini"
          @click="resetFilters"
          style="margin-left: auto;"
        >
          重置
        </el-button>
      </div>

      <div class="filter-options">
        <div class="filter-item">
          <label>报告状态：</label>
          <el-select v-model="filters.status" placeholder="全部状态" clearable @change="handleSearch">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="待处理" value="待处理"></el-option>
          </el-select>
        </div>

        <div class="filter-item">
          <label>优先级：</label>
          <el-select v-model="filters.priority" placeholder="全部优先级" clearable @change="handleSearch">
            <el-option label="全部优先级" value=""></el-option>
            <el-option label="高" value="高"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="低" value="低"></el-option>
          </el-select>
        </div>

        <div class="filter-item full-width">
          <label>调查时间：</label>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            @change="handleSearch"
          ></el-date-picker>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="statistics-section">
      <div class="section-title">
        <i class="el-icon-data-analysis"></i>
        <span>统计概览</span>
      </div>
      <div class="stat-cards">
        <div class="stat-card">
          <div class="stat-icon" style="background: #409EFF;">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.totalReports }}</div>
            <div class="stat-label">报告总数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #67C23A;">
            <i class="el-icon-circle-check"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.completedReports }}</div>
            <div class="stat-label">已完成报告</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #E6A23C;">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.totalContacts }}</div>
            <div class="stat-label">接触者总数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background: #F56C6C;">
            <i class="el-icon-warning"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ statistics.totalCloseContacts }}</div>
            <div class="stat-label">密切接触者</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查询结果 -->
    <div class="result-section">
      <div class="section-title">
        <i class="el-icon-tickets"></i>
        <span>查询结果</span>
        <span class="result-count">共 {{ filteredReports.length }} 条</span>
      </div>

      <div v-if="filteredReports.length === 0" class="empty-result">
        <i class="el-icon-document-delete"></i>
        <p>暂无符合条件的报告</p>
      </div>

      <div v-else class="report-list">
        <div 
          v-for="report in filteredReports" 
          :key="report.id"
          class="report-card"
          @click="viewReportDetail(report)"
        >
          <div class="card-header">
            <div class="card-title-row">
              <span class="report-id">{{ report.id }}</span>
              <el-tag :type="getStatusType(report.status)" size="mini">
                {{ report.status }}
              </el-tag>
            </div>
            <div class="report-title">{{ report.title }}</div>
          </div>

          <div class="card-body">
            <div class="info-row">
              <i class="el-icon-document-copy"></i>
              <span>{{ report.caseInfo }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-user"></i>
              <span>{{ report.investigator }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-time"></i>
              <span>{{ report.investigateTime }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-location"></i>
              <span>{{ report.location }}</span>
            </div>
          </div>

          <div class="card-footer">
            <div class="footer-left">
              <el-tag :type="getPriorityType(report.priority)" size="mini">
                {{ report.priority }}优先级
              </el-tag>
              <el-tag :type="getRiskLevelType(report.riskLevel)" size="mini">
                {{ report.riskLevel }}
              </el-tag>
            </div>
            <div class="footer-right">
              <span class="stat-item">
                <i class="el-icon-user"></i>
                接触{{ report.contactCount }}人
              </span>
              <span class="stat-item">
                <i class="el-icon-warning"></i>
                密接{{ report.closeContactCount }}人
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 报告详情对话框 -->
    <el-dialog
      :title="currentReport ? currentReport.title : '报告详情'"
      :visible.sync="showDetailDialog"
      width="95%"
      center
      :close-on-click-modal="false"
      custom-class="detail-dialog"
    >
      <div v-if="currentReport" class="detail-content">
        <div class="detail-section">
          <div class="detail-header">基本信息</div>
          <div class="detail-item">
            <span class="label">报告编号：</span>
            <span class="value">{{ currentReport.id }}</span>
          </div>
          <div class="detail-item">
            <span class="label">病例信息：</span>
            <span class="value">{{ currentReport.caseInfo }}</span>
          </div>
          <div class="detail-item">
            <span class="label">调查人员：</span>
            <span class="value">{{ currentReport.investigator }}</span>
          </div>
          <div class="detail-item">
            <span class="label">调查时间：</span>
            <span class="value">{{ currentReport.investigateTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">调查地点：</span>
            <span class="value">{{ currentReport.location }}</span>
          </div>
          <div class="detail-item">
            <span class="label">报告状态：</span>
            <el-tag :type="getStatusType(currentReport.status)" size="small">
              {{ currentReport.status }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">优先级：</span>
            <el-tag :type="getPriorityType(currentReport.priority)" size="small">
              {{ currentReport.priority }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">风险等级：</span>
            <el-tag :type="getRiskLevelType(currentReport.riskLevel)" size="small">
              {{ currentReport.riskLevel }}
            </el-tag>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-header">调查摘要</div>
          <div class="summary-text">{{ currentReport.summary }}</div>
        </div>

        <div class="detail-section">
          <div class="detail-header">处置措施</div>
          <div class="measures-list">
            <div 
              v-for="(measure, index) in currentReport.measures" 
              :key="index"
              class="measure-item"
            >
              <i class="el-icon-circle-check"></i>
              <span>{{ measure }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-header">接触者统计</div>
          <div class="contact-stats">
            <div class="contact-stat-item">
              <div class="contact-number">{{ currentReport.contactCount }}</div>
              <div class="contact-label">接触者总数</div>
            </div>
            <div class="contact-stat-item highlight">
              <div class="contact-number">{{ currentReport.closeContactCount }}</div>
              <div class="contact-label">密切接触者</div>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-header">时间记录</div>
          <div class="time-records">
            <div class="time-item">
              <i class="el-icon-edit"></i>
              <span>创建时间：{{ currentReport.createTime }}</span>
            </div>
            <div class="time-item">
              <i class="el-icon-refresh"></i>
              <span>更新时间：{{ currentReport.updateTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" icon="el-icon-share" @click="handleShareReport">
          分享报告
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getInvestigationReports,
  getReportStatistics
} from './service';

export default {
  name: 'ReportQuery',

  data() {
    return {
      searchKeyword: '',
      dateRange: null,
      filters: {
        status: '',
        priority: ''
      },
      
      reports: [],
      filteredReports: [],
      currentReport: null,
      
      statistics: {
        totalReports: 0,
        completedReports: 0,
        inProgressReports: 0,
        totalContacts: 0,
        totalCloseContacts: 0
      },

      showDetailDialog: false
    };
  },

  methods: {
    // 获取状态标签类型
    getStatusType(status) {
      const typeMap = {
        '已完成': 'success',
        '进行中': 'warning',
        '待处理': 'info'
      };
      return typeMap[status] || 'info';
    },

    // 获取优先级标签类型
    getPriorityType(priority) {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      };
      return typeMap[priority] || 'info';
    },

    // 获取风险等级标签类型
    getRiskLevelType(level) {
      const typeMap = {
        '高风险': 'danger',
        '中风险': 'warning',
        '低风险': 'success'
      };
      return typeMap[level] || 'info';
    },

    // 搜索处理
    handleSearch() {
      const params = {
        keyword: this.searchKeyword,
        status: this.filters.status,
        priority: this.filters.priority
      };

      // 添加日期范围
      if (this.dateRange && this.dateRange.length === 2) {
        params.startDate = this.dateRange[0];
        params.endDate = this.dateRange[1];
      }

      const loading = this.$loading({
        lock: true,
        text: '查询中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      getInvestigationReports(params).then(data => {
        this.filteredReports = data;
        loading.close();
        
        if (data.length === 0) {
          this.showToast('未找到符合条件的报告', 'info');
        } else {
          this.showToast(`找到 ${data.length} 条相关报告`);
        }
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '查询失败', 'error');
      });
    },

    // 重置筛选条件
    resetFilters() {
      this.searchKeyword = '';
      this.dateRange = null;
      this.filters = {
        status: '',
        priority: ''
      };
      this.filteredReports = [...this.reports];
      this.showToast('筛选条件已重置');
    },

    // 查看报告详情
    viewReportDetail(report) {
      this.currentReport = report;
      this.showDetailDialog = true;
    },

    // 分享报告
    handleShareReport() {
      this.showDetailDialog = false;
      this.showToast('该功能需要在调查报告保存与分享页面中使用', 'info');
      // 注：由于项目未使用 Vue Router，暂不支持页面间数据传递
      // 建议在调查报告保存与分享页面中直接选择报告进行分享
    },

    // Toast提示
    showToast(message, type = 'success') {
      this.$notify({
        title: '',
        message: message,
        type: type,
        duration: 2000,
        position: 'top-right',
        offset: 60
      });
    },

    // 加载报告列表
    loadReports() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      getInvestigationReports().then(data => {
        this.reports = data;
        this.filteredReports = data;
        loading.close();
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '加载失败', 'error');
      });
    },

    // 加载统计数据
    loadStatistics() {
      getReportStatistics().then(data => {
        this.statistics = data;
      }).catch(error => {
        console.error('加载统计数据失败', error);
      });
    }
  },

  mounted() {
    this.loadReports();
    this.loadStatistics();
  }
};
</script>

<style scoped>
.report-query {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
}

/* 搜索栏 */
.search-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-section >>> .el-input__inner {
  border-radius: 20px 0 0 20px;
}

.search-section >>> .el-input-group__append {
  border-radius: 0 20px 20px 0;
  background: #409EFF;
  border-color: #409EFF;
  color: white;
}

/* 筛选条件 */
.filter-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.section-title i {
  font-size: 18px;
  margin-right: 6px;
  color: #409EFF;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-item {
  display: flex;
  flex-direction: column;
}

.filter-item.full-width {
  width: 100%;
}

.filter-item label {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.filter-item >>> .el-select {
  width: 100%;
}

/* 统计信息 */
.statistics-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.stat-icon i {
  font-size: 20px;
  color: white;
}

.stat-info {
  width: 100%;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

/* 查询结果 */
.result-section {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.result-count {
  margin-left: auto;
  font-size: 13px;
  color: #999;
  font-weight: normal;
}

.empty-result {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-result i {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 15px;
}

.empty-result p {
  font-size: 14px;
  margin: 0;
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.report-card:active {
  transform: scale(0.98);
  border-color: #409EFF;
  background: #e7f4ff;
}

.card-header {
  margin-bottom: 12px;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.report-id {
  font-size: 12px;
  color: #999;
  font-family: 'Courier New', monospace;
}

.report-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.info-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.info-row i {
  margin-right: 6px;
  font-size: 14px;
  color: #409EFF;
  flex-shrink: 0;
}

.card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-left {
  display: flex;
  gap: 8px;
}

.footer-right {
  display: flex;
  gap: 15px;
}

.stat-item {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.stat-item i {
  margin-right: 4px;
  font-size: 13px;
}

/* 详情对话框 */
.detail-content {
  padding: 10px 0;
}

.detail-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-header {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-item .label {
  color: #666;
  min-width: 90px;
  flex-shrink: 0;
}

.detail-item .value {
  color: #333;
  flex: 1;
}

.summary-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
}

.measures-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.measure-item {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #333;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
}

.measure-item i {
  color: #67C23A;
  margin-right: 8px;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.contact-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.contact-stat-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.contact-stat-item.highlight {
  background: #fff3e6;
  border: 2px solid #E6A23C;
}

.contact-number {
  font-size: 32px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.contact-stat-item.highlight .contact-number {
  color: #E6A23C;
}

.contact-label {
  font-size: 13px;
  color: #666;
}

.time-records {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.time-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
}

.time-item i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  gap: 10px;
  padding: 0;
}

.dialog-footer .el-button {
  flex: 1;
  margin: 0;
}
</style>

